<template>
	<view class="details-list">
		<view class="details-list-title">{{title}}</view>
		<view v-for="item in list" class="details-list-item">
			<view class="details-list-item-top">
				<text class="details-list-item-name">{{item.title}}</text>
				<text class="details-list-item-value" :style="{color:item.amount.toString().includes('-')?'#000000':'#5FB684'}">
					{{item.amount}}
				</text>
			</view>
			<view class="details-list-item-time">{{item.createTime}}</view>
		</view>
	</view>
</template>

<script setup name="details-list">
import {defineProps} from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: [],
  }
});
</script>

<style lang="less" scoped>
	.details-list{
		// width: 100%;
		height: 100%;
		background-color: #ffffff;
		padding: 34rpx 34rpx 0 43rpx;
		&-title{
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 31rpx;
			color: #000000;
			margin-bottom: 52rpx;
		}
		&-item{
			display: flex;
			flex-direction: column;
			// height: 94rpx;
			border-bottom: 1px solid #F0F1F5;
			margin-bottom: 61rpx;
			padding-bottom: 26rpx;
			&-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5rpx;
				&-name{
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 31rpx;
					color: #272636;
				}
				&-value{
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 31rpx;
					color: #000000;
				}
			}
			&-time{
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 31rpx;
				color: #272636;
			}
		}
	}
</style>